<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>amazeui-switch demo</title>
    <link rel="stylesheet" type="text/css" href="../dist/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="../dist/amazeui.switch.css">
    <script type="text/javascript" src="../dist/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/amazeui.min.js"></script>
    <script type="text/javascript" src="../dist/amazeui.switch.js"></script>
<link href="https://cdn.bootcss.com/highlight.js/8.0/styles/github.min.css" rel="stylesheet">  
<script src="https://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
<script >hljs.initHighlightingOnLoad();</script>  
    <style type="text/css">
.am-input-group-label {background-color: #FFFFFF;border: 0px solid #ccc;}
    </style>
</head>

<body class="am-container">
<section class="amp-banner">
  <div class="am-container">
    <h1>Amaze UI Switch</h1>
    <p class="">Amaze UI switch插件</p>    
  </div>
<div id="github">
  <iframe src="https://ghbtns.com/github-btn.html?user=lscho&repo=am-switch&type=watch&count=true"
          allowtransparency="true" frameborder="0" scrolling="0" width="98" height="20"></iframe>
  <iframe src="https://ghbtns.com/github-btn.html?user=lscho&type=follow&count=true"
          allowtransparency="true" frameborder="0" scrolling="0" width="156" height="20"></iframe>
</div>  
</section>
    <div class="am-panel">
        <div class="am-panel-hd">普通示例</div>
        <div class="am-panel-bd am-g">
          <input type="checkbox" class="am-switch" />
          <input type="checkbox" class="am-switch" checked />
        </div>  
    </div>

    <div class="am-panel">
        <div class="am-panel-hd">简洁模式</div>
        <div class="am-panel-bd am-g">
          <input type="checkbox" class="am-switch am-switch-mini" />
          <input type="checkbox" class="am-switch am-switch-mini" checked />
        </div>  
    </div> 

    <div class="am-panel">
        <div class="am-panel-hd">多主题</div>
        <div class="am-panel-bd am-g">
          <input type="checkbox" class="am-switch am-switch-default" checked />
          <input type="checkbox" class="am-switch am-switch-secondary" checked />
          <input type="checkbox" class="am-switch am-switch-success" checked />
          <input type="checkbox" class="am-switch am-switch-warning" checked />
          <input type="checkbox" class="am-switch am-switch-danger" checked /> 
        </div>
    </div>

    <div class="am-panel">
        <div class="am-panel-hd">形状</div>
        <div class="am-panel-bd">
        <div class="am-g">
          <input type="checkbox" class="am-switch am-switch-default" checked />
          <input type="checkbox" class="am-switch am-switch-secondary" checked />
          <input type="checkbox" class="am-switch am-switch-success" checked />
          <input type="checkbox" class="am-switch am-switch-warning" checked />
          <input type="checkbox" class="am-switch am-switch-danger" checked /> 
        </div>
        <div class="am-g">
          <input type="checkbox" class="am-switch am-round am-switch-default" checked />
          <input type="checkbox" class="am-switch am-round am-switch-secondary" checked />
          <input type="checkbox" class="am-switch am-round am-switch-success" checked />
          <input type="checkbox" class="am-switch am-round am-switch-warning" checked />
          <input type="checkbox" class="am-switch am-round am-switch-danger" checked /> 
        </div>        
        </div>
    </div>

    <div class="am-panel">
        <div class="am-panel-hd">异步渲染</div>
        <div class="am-panel-bd">
        <button class="am-btn am-btn-default" id="insert">插入</button>   
        <script type="text/javascript">
          $(function(){
            $("#insert").click(function(){
              $switch=$('<input type="checkbox" class="am-switch am-switch-default" checked />');
              $("#content").append($switch);
              $switch.switch();
            });
          });
        </script>
        <div class="am-g" id="content" style="margin-top:40px;">

        </div>
        </div>
    </div>    


</body>

</html>
